<template>
  <div class="book-body">
    <loadings v-if="isLoadings"></loadings>
    <header class="bookxq">
      <div class="title">
        <router-link to class="left">
          <span class="ui-leftaw-2" @click="$router.back(-1)"></span>
        </router-link>
        <div class="tit-top">
          <h3>书籍详情</h3>
          <router-link to="/home" class="home">首页</router-link>
        </div>
      </div>
    </header>
    <div class="bookzt">
      <div class="img">
        <img :src="`${book_xq.img}`" alt="" />
      </div>
      <div class="bk-text">
        <h1>{{ book_xq.title }}</h1>
        <p>作者：{{ book_xq.name }}</p>
        <p>分类：{{ book_xq.fl }}</p>
        <p>字数：{{ (book_xq.tl / 10000).toFixed(1) }}万</p>
        <p>点击：{{ book_xq.oc }}</p>
        <p>授权方：{{ book_xq.sq }}</p>
      </div>
    </div>
    <loading v-if="isLoadingss"></loading>
    <div class="btns" v-for="(item, x) in booklistdata" v-if="x < 1">
      <router-link
        :to="`/yuedu?source_uuid=${book_id}&content_uuid=${item.uuid}&title=${book_title}`"
        class="one"
        ><span @click="getcookie()">立即阅读</span></router-link
      >
      <router-link :to="``" class="two">下载整本</router-link>
    </div>
    <div class="btns">
      <button v-if="push" @click="getdata" to class="push">加入书架</button>
      <button v-else @click="dldata" to class="remo">移出书架</button>
    </div>
    <loading v-if="isLoading"></loading>
    <div class="book-new">
      <router-link
        :to="`/yuedu?source_uuid=${book_id}&content_uuid=${lastdata.uuid}&title=${book_title}`"
        class="new"
        >{{ book_xq.newb }}</router-link
      >
      <p class="time">{{ book_xq.ltime }}更新</p>
      <i>最新</i>
    </div>
    <div class="book-xq">
      <h4>内容简介</h4>
      <p class="content">{{ book_xq.text }}</p>
    </div>
    <div class="book-mulu">
      <h4 class="book-title" @click="downupdate">
        目录<span class="j-cata-length">(共{{ book_xq.zjs }}章)</span
        ><router-link to class="sort up" v-if="downup">倒序<i></i></router-link>
        <router-link to class="sort dowm" v-else="">正序<i></i></router-link>
      </h4>
      <div class="muluye">
        <ul>
          <li class="grade_01" v-for="(item, x) in booklistdata" v-if="x < 5">
            <router-link
              :to="`/yuedu?source_uuid=${book_id}&content_uuid=${item.uuid}&title=${book_title}`"
              >{{ item.title }}<i></i
            ></router-link>
          </li>
        </ul>
        <router-link
          :to="`/mulu?source_uuid=${book_id}&title=${book_title}`"
          class="more"
          ><span>更多目录</span><i></i
        ></router-link>
      </div>
    </div>
    <div class="plbox">
      <h4 class="m-book-title">
        <i class="j-comment-title">精彩评论</i
        ><span class="j-comment-count"
          ><em>({{ pllist.length }})</em></span
        ><a
          class="comment j-to-comment"
          onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
          data-login="false"
          ><i
            class=""
            onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
          ></i
          ><span
            class=""
            onclick="_gaq.push(['_trackEvent', 'bookdetail', 'comment', 'post'])"
            >写评论</span
          ></a
        >
      </h4>
      <ul class="j-more-comment">
        <li class="j-intro-wrap" v-for="(item, p) in pllist" v-if="p < 2">
          <img :src="item.avatar" class="headimg j-headimg" />
          <p class="user">
            <span class="uname j-uname"> {{ item.nickName }} </span>
            <span class="time">{{ item.time }}</span>
          </p>
          <p class="desc j-intro">
            <router-link to="/">
              {{ item.comment }}
            </router-link>
          </p>
          <p class="opt opts f-cb">
            <span class="praise j-praise"
              ><i></i><span class="likes">{{ item.likes }}</span>
            </span>
          </p>
        </li>
      </ul>
      <router-link :to="`/pl?bookId=${book_id}`" class="more"
        ><span>更多评论</span><i></i
      ></router-link>
    </div>
  </div>
</template>
<script>
import Loading from "@/components/loading/index.vue";
import Loadings from "@/components/loading/indexlist.vue";
import { recommendFunc, reFunc } from "@/request/index";
import { bkxqFunc, newbFunc, bklistFunc, plFunc } from "@/request/index";
export default {
  data() {
    return {
      book_id: this.$route.query.id,
      book_title: this.$route.query.title,
      book_xq: {
        title: "",
        text: "",
        name: "",
        img: "",
        fl: "",
        sq: "",
        zjs: "",
        tl: "",
        oc: "",
        ltime: "",
        newb: "",
        id: "",
        uuid: "",
      },
      booklistdata: [],
      lastdata: [],
      downup: true,
      pllist: [],
      datastr: [],
      pushstr: [],
      push: true,
      isLoading: true,
      isLoadings: true,
      isLoadingss: true,
    };
  },
  components: {
    Loading,
    Loadings,
  },
  methods: {
    async bkxq() {
      let ds = localStorage.getItem("userdata");
      if (ds !== null) {
        let usr = JSON.parse(ds);
        let books = usr.bookid;
        // console.log(books);
        if (books.length >= 0) {
          let id = this.book_id;
          // console.log(this.pushstr);
          let pushs = books.filter((item) => {
            if (item.id == id) {
              this.push = false;
              return true;
            }
          });
        } else {
          this.push = true;
        }
      }
      // console.log(this.book_id);
      let id = this.book_id;
      let title = this.book_title;
      await bkxqFunc(id, title)
        .then((res) => {
          // console.log(res.feed.entry);
          let alldata = res.feed.entry;
          this.book_xq.id = alldata.id;
          this.book_xq.title = alldata.title;
          this.book_xq.text = alldata.summary;
          this.book_xq.name = alldata.author.name;
          this.book_xq.fl = alldata["pris:book"].category;
          this.book_xq.sq = alldata["pris:book"].authorizer;
          this.book_xq.zjs = alldata["pris:book"].totalArticleCount[0];
          this.book_xq.tl = alldata["pris:book"].words;
          this.book_xq.oc = alldata["pris:subscribe"].clicksCount;
          this.book_xq.img = alldata.link[1].href;
          let reg = /(\d{4})-(\d{2})-(\d{2})\w(\d{2}:\d{2})/g;
          let lsttime = reg.exec(res.feed.entry.updated);
          let nyr =
            lsttime[1] +
            "年" +
            lsttime[2] +
            "月" +
            lsttime[3] +
            "日" +
            " " +
            lsttime[4];
          this.book_xq.ltime = nyr;
          // let xx =res.feed.entry["pris:book"]
          // console.log(nyr);
          this.isLoadings = false;
        })
        .catch((err) => {
          console.log("请求失败...");
        });
      newbFunc(id)
        .then((res) => {
          // console.log(res.item.latestArticleTitle)
          this.book_xq.newb = res.item.latestArticleTitle;
        })
        .catch((err) => {
          console.log("请求失败...");
        });
      bklistFunc(id)
        .then((res) => {
          // console.log(res.data.catalog)
          let listdata = res.data.catalog;
          this.booklistdata = listdata.map((item) => {
            // console.log(item);
            // console.log(list);
            return item;
          });
          this.isLoadingss = false;
          this.lastdata = this.booklistdata[this.booklistdata.length - 1];
          // console.log(this.lastdata);
        })
        .catch((err) => {
          console.log("请求失败...");
        });
      plFunc(id)
        .then((res) => {
          // console.log();
          let pllis = res.all.list;
          this.pllist = pllis.map((item) => {
            // console.log(item.time);
            // console.log(list);
            let timestamp = item.time;
            // 此处时间戳以毫秒为单位
            let date = new Date(timestamp);
            item.time =
              date.getFullYear() +
              "-" +
              (date.getMonth() + 1) +
              "-" +
              date.getDate();
            // console.log(item);
            return item;
          });
          this.isLoading = false;
        })
        .catch((err) => {
          console.log("请求失败...");
        });
    },
    downupdate(e) {
      if (e.target.tagName === "A") {
        // if(this.downup=true){
        this.downup = !this.downup;
        // console.log(e.target.className);
        this.booklistdata = this.booklistdata.reverse();
      }
    },
    getdata() {
      let datastr = localStorage.getItem("userdata");
      if (datastr !== null) {
        let usr = JSON.parse(datastr);
        let books = usr.bookid;
        console.log(books.length);
        if (books.length == undefined) {
          let iddata = [];
          iddata[0] = {
            id: this.book_xq.id,
            title: this.book_xq.title,
            push: false,
          };
          usr.bookid = iddata;
          console.log(usr);
          let usrdat = usr;
          console.log(JSON.stringify(usrdat));
          localStorage.setItem("userdata", JSON.stringify(usrdat));
          this.$router.go(0);
        } else {
          if (this.book_xq.id !== "") {
            let ishas = true;
            let iddata = usr.bookid;
            console.log(iddata);
            iddata.forEach((item) => {
              if (item.id == this.book_xq.id) {
                ishas = false;
              }
            });
            if (ishas == false) {
              alert("已收藏");
              return;
            }
            iddata.push({
              id: this.book_xq.id,
              title: this.book_xq.title,
              push: false,
            });
            console.log(iddata);
            usr.bookid = iddata;
            localStorage.setItem("userdata", JSON.stringify(usr));
            this.$router.go(0);
          }
        }
      } else {
        alert("请登录后再进行操作");
      }
    },
    dldata() {
      let datastrs = localStorage.getItem("userdata");
      if (datastrs !== null) {
        let usr = JSON.parse(datastrs);
        let books = usr.bookid;
        if (books.length >= 0) {
          let id = this.book_xq.id;
          // console.log(this.datastr)
          let dlstr = books.filter((item) => {
            console.log(item.id);
            if (item.id !== id) {
              return true;
            }
          });
          // console.log(dlstr)
          usr.bookid = dlstr;
          localStorage.setItem("userdata", JSON.stringify(usr));
          this.$router.go(0);
        }
      }
    },
    getcookie() {
      let datastr = localStorage.getItem("userdata");
      if (datastr !== null) {
        let usr = JSON.parse(datastr);
        let books = usr.cookic;
        // console.log(books.length);
        if (books.length == undefined) {
          let iddata = [];
          iddata[0] = {
            id: this.book_xq.id,
            title: this.book_xq.title,
          };
          usr.cookic = iddata;
          // console.log(usr);
          let usrdat = usr;
          // console.log(JSON.stringify(usrdat));
          localStorage.setItem("userdata", JSON.stringify(usrdat));
          this.$router.go(0);
        } else {
          if (this.book_xq.id !== "") {
            let ishas = true;
            let iddata = usr.cookic;
            // console.log(iddata);
            iddata.forEach((item) => {
              if (item.id == this.book_xq.id) {
                ishas = false;
              }
            });
            if (ishas == false) {
              let dlstr = iddata.filter((item) => {
                console.log(item.id);
                if (item.id !== this.book_xq.id) {
                  return true;
                }
              });
              // console.log(dlstr)
              dlstr.push({
                id: this.book_xq.id,
                title: this.book_xq.title,
              });
              usr.cookic = dlstr;
              localStorage.setItem("userdata", JSON.stringify(usr));
              return;
            }
            iddata.push({
              id: this.book_xq.id,
              title: this.book_xq.title,
            });
            // console.log(iddata);
            usr.cookic = iddata;
            localStorage.setItem("userdata", JSON.stringify(usr));
          }
        }
      }
    },
  },
  created() {
    // console.log(this.$route.query);
    this.bkxq();
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.book-body {
  width: 100%;
  .bookxq {
    width: 100%;
    background-color: black;
    min-width: 362px;
    .title {
      margin: auto 1%;
      height: 44px;
      line-height: 44px;
      a.left {
        float: left;
        font-size: 14px;
        .ui-leftaw-2 {
          display: inline-block;
          margin-bottom: 3px;
          margin-left: 15px;
          margin-right: 15px;
          vertical-align: middle;
          width: 10px;
          height: 18px;
          background: url(../static/imgs/arrow-left.png);
          background-size: 100% 100%;
        }
      }
      .tit-top {
        padding: 0 2%;
        box-sizing: border-box;
        text-align: center;
        h3 {
          width: 80%;
          display: inline-block;
          color: white;
        }
        a {
          display: inline-block;
          &.home {
            width: 10%;
            height: 28px;
            line-height: 28px;
            color: #fff;
            background: #000;
            font-size: 15px;
            padding: 0;
            text-align: right;
          }
        }
      }
    }
  }
  .bookzt {
    display: flex;
    clear: both;
    padding: 15px;
    background: #fff;
    color: #888;
    .img {
      float: left;
      margin-right: 10px;
      line-height: 0;
      img {
        width: 93px;
        height: 130px;
      }
    }
    .bk-text {
      font-size: 12px;
      line-height: 1.14;
      float: left;
      box-sizing: border-box;
      h1 {
        font-size: 16px;
        margin-bottom: 5px;
        color: #1d2c33;
        height: 1.14em;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      p {
        line-height: 1.8;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
  .btns {
    width: 100%;
    display: flex;
    text-align: center;
    vertical-align: middle;
    a {
      display: inline-block;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 20px;
      width: 40%;
      margin: 3% 3% 0;
      border-radius: 3px;
      vertical-align: middle;
      &.one {
        background-color: #3c98c9;
        border: #3c98c9 solid 1px;
        color: #fff;
      }
      &.two {
        background-color: #fff;
        border: #3b98c9 solid 1px;
        color: #3b98c9;
      }
      &.push {
        width: 100%;
        margin-top: 3%;
        background-color: #faf7f5;
        border: #e8e7e6 solid 1px;
        color: #998c7f;
      }
    }
    button {
      display: inline-block;
      padding: 6px 12px;
      font-size: 14px;
      line-height: 20px;
      width: 40%;
      margin: 3% 3% 0;
      border-radius: 3px;
      vertical-align: middle;
      &.push {
        width: 100%;
        margin-top: 3%;
        background-color: #faf7f5;
        border: #e8e7e6 solid 1px;
        color: #998c7f;
      }
      &.remo {
        width: 100%;
        margin-top: 3%;
        background-color: #998c7f;
        border: #e8e7e6 solid 1px;
        color: #faf7f5;
      }
    }
  }
  .book-new {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.14;
    color: #333;
    position: relative;
    padding: 20px 15px 20px 45px;
    background-color: #ebe8e6;
    border-top: 1px solid #e8e7e6;
    p {
      display: block;
    }
    .new {
      font-size: 14px;
      color: #3a98c9;
    }
    .time {
      color: #aba499;
    }
    i {
      position: absolute;
      top: 20px;
      left: 15px;
      display: block;
      width: 25px;
      height: 15px;
      background: url(../static/imgs/new.png) 0 0 no-repeat;
      background-size: 100% 100%;
      text-indent: -9999px;
    }
  }
  .book-xq {
    background: #faf7f5;
    padding: 15px 15px 20px;
    border-top: 1px solid #e8e7e6;
    h4 {
      display: block;
      font-weight: bold;
    }
    .content {
      font-size: 14px;
      color: #979999;
      line-height: 20px;
      overflow: hidden;
      padding-top: 12px;
    }
  }
  .book-mulu {
    background: #faf7f5;
    padding: 15px 15px 20px;
    border-top: 1px solid #e8e7e6;
    border-bottom: 1px solid #e8e7e6;
    .book-title {
      color: #1d2c33;
      font-size: 16px;
      .sort {
        position: relative;
        margin-top: 2px;
        color: #3a98c9;
        font-size: 14px;
        float: right;
        padding-right: 13px;
        font-weight: normal;
        i {
          position: absolute;
          top: 5.5px;
          right: 0;
          width: 9px;
          height: 10px;
          display: block;
        }
        &.dowm {
          i {
            background: url(../static/imgs/mulu-dowm.png) 0 0 no-repeat;
            background-size: 100% 100%;
          }
        }
        &.up {
          i {
            background: url(../static/imgs/mulu-up.png) 0 0 no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }
    .muluye {
      position: relative;
      padding-top: 12px;
      ul {
        li {
          a {
            font-size: 14px;
            line-height: 1.7;
            display: block;
            color: #979999;
            outline: none;
          }
        }
      }
      .more {
        display: block;
        margin-top: 14px;
        height: 29px;
        line-height: 27px;
        background-color: #faf7f5;
        color: #998d7f;
        text-align: center;
        border: 1px solid #e4e0dd;
        border-radius: 3px;
      }
    }
  }
  .plbox {
    background: #faf7f5;
    padding: 15px;
    .m-book-title {
      color: #1d2c33;
      font-size: 16px;
      font-weight: bold;
      span {
        color: #aba49a;
        font-size: 12px;
        font-weight: normal;
      }
      a {
        float: right;
        font-weight: normal;
        color: #333;
        outline: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        i {
          margin-top: 1px;
          width: 12px;
          height: 13px;
          display: inline-block;
          vertical-align: middle;
          background: url(../static/imgs/pl.png) 0 0 no-repeat;
          background-size: 100% 100%;
        }
        span {
          display: inline-block;
          padding-left: 5px;
          vertical-align: middle;
          color: #3a98c9;
          font-size: 14px;
        }
      }
    }
    ul {
      li {
        position: relative;
        padding: 15px 0;
        margin: 0 15px;
        border-bottom: 1px dotted #b3aeaa;
        .headimg {
          width: 34px;
          height: 34px;
          float: left;
          margin-right: 15px;
          border-radius: 50%;
        }
        p {
          &.user {
            height: 15px;
            .uname {
              color: #6392c5;
              font-size: 14px;
            }
            .time {
              position: absolute;
              padding-left: 40px;
              padding-bottom: 40px;
              right: 0;
              top: 14px;
              font-size: 11px;
              color: #999;
            }
          }
          &.star {
            padding-top: 7px;
          }
          &.desc {
            padding-top: 10px;
            line-height: 17px;
            font-size: 14px;
            color: #545454;
            -webkit-line-clamp: 4;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            word-break: break-all;
          }
          &.opts {
            margin-top: 10px;
            height: 15px;
            padding-left: 49px;
            line-height: 20px;
            .praise {
              float: right;
              font-size: 11px;
              color: #999;
              height: 15px;
              i {
                display: block;
                float: left;
                width: 15px;
                height: 15px;
                background: url(../static/imgs/like.png);
                background-size: 100% 100%;
              }
              .likes {
                float: left;
                line-height: 20px;
                width: 24px;
                text-overflow: clip;
                white-space: nowrap;
                overflow: hidden;
                text-align: center;
              }
            }
          }
        }
      }
    }
    .more {
      display: block;
      margin-top: 14px;
      height: 29px;
      line-height: 27px;
      background-color: #faf7f5;
      color: #998d7f;
      text-align: center;
      border: 1px solid #e4e0dd;
      border-radius: 3px;
      i {
        width: 6px;
        height: 9px;
        vertical-align: middle;
        display: inline-block;
        margin-left: 3px;
        background: url(../static/imgs/rt.png) 0 0 no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}
</style>